<template>
  <div>
    <h2>侦听器</h2>
    <input type="text" v-model.lazy="uname" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      uname: "zhangsan",
      dog: {
        name: "旺财",
        age: 2,
      },
    };
  },
  // 侦听器要写到和data平级的watch中
  watch: {
    // 1、函数写法
    // uname(newVal, oldVal) {
    //   console.log(newVal, oldVal);
    // },
    // 2、对象写法（就是为了加immediate或deep选项）
    // uname: {
    //   handler(newVal, oldVal) {
    //     // 写对象格式，handler必须写，且格式固定
    //     console.log(newVal, oldVal);
    //   },
    //   immediate: true, // 加入这个选项，表示立即侦听，打开页面立即获取初始值
    // },
    // dog: {
    //   handler(newVal) {
    //     console.log(newVal);
    //   },
    //   deep: true, // 深度侦听，用于侦听对象属性的变化
    // },
    // 只侦听对象的某个属性
    "dog.age"(newVal) {
      console.log(newVal);
    },
  },
};
</script>

<style>
</style>
